import React from 'react';
import { Form, Icon, Input, Button, Checkbox, Radio } from 'antd';
import styled from 'styled-components';

const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

const LoginBtn = styled.div` 
	width: 100%;
`
const ForgetTag = styled.a` 
	float: right;
`

class LoginForm extends React.Component {
	handleSubmit = (e) => {
		e.preventDefault();
		const that = this;
		this.props.form.validateFields((err, value) => {
			if (!err) {
				console.log(value);
				that.props.handleLogin(value);
			}
		})
	}
	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div>	
				<Form onSubmit={this.handleSubmit}>
			    <FormItem>
			      {getFieldDecorator('username', {
			        rules: [{ required: true, message: '请输入用户名' }],
			      })(
			        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" size="large" />
			      )}
			    </FormItem>
			    <FormItem>
			    	{getFieldDecorator('password', {
			        rules: [{ required: true, message: '请输入用户密码!' }],
			      })(
			        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password"  size="large" />
			      )}
			    </FormItem>
			    <FormItem style={{
			    	marginBottom: '12px'
			    }}>
	          {getFieldDecorator('role', {
	          	rules: [{ required: true, message: '请选择您的角色！'}],
	          	initialValue: 1,
	          })(
	            <RadioGroup size="large">
	              <Radio value={1}>学生</Radio>
	              <Radio value={2}>老师</Radio>
	              <Radio value={3}>管理员</Radio>
	            </RadioGroup>
	          )}
        	</FormItem>
			    <FormItem>
			      {getFieldDecorator('remember', {
			        valuePropName: 'checked',
			        initialValue: true,
			      })(
			       	<Checkbox >记住我</Checkbox>
			      )}
			      <ForgetTag href="">忘记密码</ForgetTag>
			      <Button type="primary" htmlType="submit" style={{ width: '100%', height: '40px'}} >
			       	登录
			      </Button>
	 					<a href="">还没账号？点我注册</a>
			    </FormItem>
			  </Form>
				<style jsx>{`
					.login-form-button {
					  width: 100%;
					  height: 200px;
					}
				`}</style>
			</div>

		)
	}
}

export default Form.create()(LoginForm)